<html>
<head>
    <meta charset="utf-8">
   <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https:////maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script>
     window.onload = function(){
     for(var i=0; i<100; i++)
         

           $('<option />', {
                val: i,
                text: i
            }).appendTo($('#cmb_pagina'));
     }
    </script>
    
    <style>
    .coma-bar
        {
            color: #337ab7;
            background-color: #9bc5ff;
        }
    
        .progress {
    text-align:center;
    width:30%;
    margin:15px auto;
}
.progress-value {
    position:absolute;
    right:0;
    left:0;
}
    </style>

</head>
<body style="width:1024px">
    <legend>Opcion 1</legend>
    
    <div>
        <ul class="pagination">
    <li><a href="#"><span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span>&nbsp;</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span>&nbsp;</a></li>
    <li><span style="display: inline">Mostrando elementos de 20 a 29 de 250 </span></li>
            <li><span>Ir a página <select id="cmb_pagina">  </select></span></li>
            <li><span>Items por página <select id="cmb_items"> <option value="10" selected>10</option><option value="20">20</option><option value="50">50</option><option value="100">100</option><option value="200">200</option><option value="500">500</option><option value="1000">1000</option>        </select></span></li>
    <li><a href="#"><span class="glyphicon glyphicon-forward" aria-hidden="true"></span>&nbsp;</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span>&nbsp;</a></li>
</ul>
        
        
    </div>
    
    
        <legend>Opcion 2</legend>
    
    <div>
        <ul class="pagination">
    <li><a href="#"><span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span>&nbsp;</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span>&nbsp;</a></li>
    <li><span style="display: inline">
        <div class="progress" style="width: 400px; margin: 0px">
            <span class="progress-value">Mostrando elementos de 20 a 29 de 250</span>
            <div class="progress-bar coma-bar" style="width: 20%;">
        
        </div>
        
       </span></li>
            <li><span>Ir a página <select id="cmb_pagina">  </select></span></li>
            <li><span>Items por página <select id="cmb_items"> <option value="10" selected>10</option><option value="20">20</option><option value="50">50</option><option value="100">100</option><option value="200">200</option><option value="500">500</option><option value="1000">1000</option>        </select></span></li>
    <li><a href="#"><span class="glyphicon glyphicon-forward" aria-hidden="true"></span>&nbsp;</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span>&nbsp;</a></li>
</ul>
        
        
    </div>
</body>

</html>